<template>
    <div>
        <el-form :model="queryParams" ref="queryRef" label-position="right" label-width="auto">
            <div class="title_2">法人客户查询</div>
            <el-row>
            <el-col :span="8">
                <el-form-item label="客户名称" prop="custName">
                <el-input
                    v-model="queryParams.custName"
                    placeholder="请输入"
                    clearable
                    style="width: 300px"
                />
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="证件号码类型" prop="certType">
                <el-select
                    v-model="queryParams.certType"
                    placeholder="请选择"
                    clearable
                    style="width: 300px"
                >
                    <el-option
                    v-for="dict in certTypeOptions"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                    />
                </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="证件号码" prop="certNo">
                <el-input
                    v-model="queryParams.certNo"
                    placeholder="请输入"
                    clearable
                    style="width: 300px"
                />
                </el-form-item>
            </el-col>
            </el-row>
            <el-row>
            <el-col :span="8">
                <el-form-item label="客户类别(行业)" prop="custClass">
                <el-select
                    v-model="queryParams.custClass"
                    placeholder="请选择"
                    clearable
                    style="width: 300px"
                >
                    <el-option
                    v-for="dict in custClassOptions"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                    />
                </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="客户类别(规模)" prop="custScale">
                <el-select
                    v-model="queryParams.custScale"
                    placeholder="请选择"
                    clearable
                    style="width: 300px"
                >
                    <el-option
                    v-for="dict in custScaleOptions"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                    />
                </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="所属行业" prop="industryAll">
                <el-cascader
                    v-model="queryParams.industryAll"
                    :options="industryAllOptions"
                    style="width: 300px"
                />
                </el-form-item>
            </el-col>
            </el-row>
            <el-row>
            <el-col :span="8">
                <el-form-item label="所在省/市/区县" prop="address">
                <el-cascader
                    v-model="queryParams.address"
                    :options="addressOptions"
                    style="width: 300px"
                />
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="是否清单式管理" prop="isList">
                <el-select
                    v-model="queryParams.isList"
                    placeholder="请选择"
                    clearable
                    style="width: 300px"
                >
                    <el-option
                    v-for="dict in isListOptions"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                    />
                </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="存潜标识" prop="label">
                <el-select
                    v-model="queryParams.label"
                    placeholder="请选择"
                    clearable
                    style="width: 300px"
                >
                    <el-option
                    v-for="dict in labelOptions"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                    />
                </el-select>
                </el-form-item>
            </el-col>
            </el-row>
            <el-row>
            <el-form-item label="业务属性" prop="affiliation">
                <el-checkbox-group v-model="queryParams.affiliation">
                <el-checkbox-button label="团车" value="1"></el-checkbox-button>
                <el-checkbox-button label="重客" value="2"></el-checkbox-button>
                <el-checkbox-button label="企客" value="3"></el-checkbox-button>
                <el-checkbox-button label="三航" value="4"></el-checkbox-button>
                </el-checkbox-group>
            </el-form-item>
            </el-row>
            <el-row justify="center">
            <el-form-item>
                <el-button  @click="resetQuery(queryRef)">重置</el-button>
                <el-button type="primary" @click="getList">搜索</el-button>
            </el-form-item>
            </el-row>
        </el-form>
        <div>
            <span class="title_2">法人客户列表</span>
            <div class="mb10 pull-right">
            <el-button plain type="primary">客户清单导出</el-button>
            </div>
        </div>
        <el-table
            v-loading="loading"
            :data="tableList"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="标识" align="center" prop="label" min-width="150" :show-overflow-tooltip="true">
            <template #default="{row}">
                <svg-icon v-if="row.label.includes(1)" icon-class="tag_1"/>
                <svg-icon v-if="row.label.includes(2)" icon-class="tag_2"/>
                <svg-icon v-if="row.label.includes(3)" icon-class="tag_3"/>
            </template>
            </el-table-column>
            <el-table-column label="客户名称" align="center" prop="custName" min-width="150" :show-overflow-tooltip="true"/>
            <el-table-column label="证件号码类型" align="center" prop="certType" min-width="150" :show-overflow-tooltip="true"/>
            <el-table-column label="证件号码" align="center" prop="certNo" :show-overflow-tooltip="true"/>
            <el-table-column label="P02客户编码" align="center" prop="P02Code" min-width="150" :show-overflow-tooltip="true"/>
            <el-table-column label="业务归属" align="center" prop="affiliation" min-width="120" :show-overflow-tooltip="true"/>
            <el-table-column label="总部管理处室" align="center" prop="sections" min-width="150" :show-overflow-tooltip="true"/>
            <el-table-column label="所属行业一级" align="center" prop="industryOne" min-width="150" :show-overflow-tooltip="true"/>
            <el-table-column label="所属行业二级" align="center" prop="industryTwo" min-width="150" :show-overflow-tooltip="true"/>
            <el-table-column label="所属行业三级" align="center" prop="industryThree" min-width="150" :show-overflow-tooltip="true"/>
            <el-table-column label="所属行业四级" align="center" prop="industryFour" min-width="150" :show-overflow-tooltip="true"/>
            <el-table-column label="操作" align="center" fixed="right" width="180" class-name="small-padding fixed-width">
            <template #default="scope">
                <el-button link type="primary" @click="handleCheck(scope.row)">查看</el-button>
                <el-button link type="primary" @click="handleFocus(scope.row)">{{ scope.row.isFocus ? '已关注' : '关注' }}</el-button>
            </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total > 10"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
        />
    </div>
</template>

<script setup>
const router = useRouter()

const loading = ref(false)
const tableList = ref([])
const total = ref(0)
const queryRef = ref(null)
const queryParams = reactive({
    custName: '',
    certType: '',
    certNo: '',
    custClass: '',
    custScale: '',
    industryAll: '',
    address: '',
    isList: '',
    label: '',
    affiliation: [],
    pageNum: 1,
    pageSize: 10,
})
const certTypeOptions = ref([
    { label: '统一社会信用代码', value: 1 },
    { label: '组织机构代码', value: 2 },
])
const custClassOptions = ref([
    { label: '轨道交通客户', value: 1 },
])
const custScaleOptions = ref([
    { label: '国际500强', value: 1 },
    { label: '国内500强', value: 2 },
])
const industryAllOptions = ref([
    {
        label: '建筑业',
        value: '0000',
        children: [
        {
            label: '房屋建筑业',
            value: '0100',
            children: [
            {
                label: '住宅房屋建筑',
                value: '0110',
                children: [],
            },
            ],
        },
        {
            label: '土木工程建筑业',
            value: '0200',
            children: [],
        },
        {
            label: '建筑安装业',
            value: '0300',
            children: [],
        },
        ],
    },
    {
        label: '制造业',
        value: '1000',
        children: [],
    },
    {
        label: '信息传输、软件和信息技术服务业',
        value: '2000',
        children: [],
    },
])
const addressOptions = ref([
    {
        label: '北京市',
        value: '0000010',
        children: [
        {
            label: '市辖区',
            value: '0000354',
            children: [
            {
                label: '东城区',
                value: '00000397',
                children: []
            },
            {
                label: '海淀区',
                value: '00000398',
                children: []
            },
            {
                label: '朝阳区',
                value: '00000399',
                children: []
            },
            ]
        }
        ],
    },
    {
        label: '上海市',
        value: '0000002',
        children: [],
    },
    {
        label: '山西省',
        value: '0000001',
        children: [],
    }
])
const isListOptions = ref([
    { label: '全部', value: '' },
    { label: '是', value: 1 },
    { label: '否', value: 0 },
])
const labelOptions = ref([
    { label: '全部', value: '' },
    { label: '存客', value: '1' },
    { label: '潜客', value: '2' },
])

const getList = () => {
    loading.value = true
    setTimeout(() => {
        tableList.value = [
            {
            label: [1,2],
            custName: '中国建筑工程有限公司',
            certType: '统一社会信用代码',
            certNo: 'XXXXXXXXXXXXXX',
            P02Code: 'XXXXXXXXXXX',
            affiliation: '团客，重客',
            sections: '企业客户部',
            industryOne: '建筑业',
            industryTwo: '房屋建筑业',
            industryThree: '住宅房屋建筑',
            industryFour: '住宅房屋建筑',
            isFocus: true,
            },
            {
            label: [2,3],
            custName: '中国建筑工程有限公司',
            certType: '统一社会信用代码',
            certNo: 'XXXXXXXXXXXXXX',
            P02Code: 'XXXXXXXXXXX',
            affiliation: '团客，重客',
            sections: '企业客户部',
            industryOne: '建筑业',
            industryTwo: '房屋建筑业',
            industryThree: '住宅房屋建筑',
            industryFour: '住宅房屋建筑',
            isFocus: true,
            },
            {
            label: [1,2,3],
            custName: '中国建筑工程有限公司',
            certType: '统一社会信用代码',
            certNo: 'XXXXXXXXXXXXXX',
            P02Code: 'XXXXXXXXXXX',
            affiliation: '团客，重客',
            sections: '企业客户部',
            industryOne: '建筑业',
            industryTwo: '房屋建筑业',
            industryThree: '住宅房屋建筑',
            industryFour: '住宅房屋建筑',
            isFocus: true,
            },
        ]
        total.value = Number(tableList.value.length)
        loading.value = false
    }, 300)
}
const resetQuery = () => {
    queryRef.value.resetFields()
    getList()
}
getList()
const handleSelectionChange = () => {
}
const handleFocus = (row) => {
    loading.value = true
    setTimeout(() => {
        row.isFocus = !row.isFocus
        loading.value = false
    }, 300);
}
const handleCheck = (row) => {
    router.push({path: "/customer/details"})
}
</script>